<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui 学习</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="index.css">
 <style>


 </style>

</head>
<body>
         <div id="app" >

             <el-upload class="avatar-uploader"
                     action="http://localhost:8081/setmeal/addmeal.do"
                     list-type="picture-card"
                     :auto-upload="autoupload"
                     :on-preview="handlePictureCardPreview"
                     :on-success="handleSuccess"
                     :name="name"
                     :before-upload="beforeUpload"

                   >
                 <i class="el-icon-plus"></i>
             </el-upload>
             <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>

         </div>
                 <script>
                    var  vm = new Vue(
                        {
                            el: "#app",
                            data() {
                                return {
                                    dialogImageUrl: '',
                                    dialogVisible: false,
                                    autoupload:true,
                                    name:'upload'
                                }
                            },
                            methods: {
                                beforeUpload(file) {
                                    const isLt2M = file.size / 1024 / 1024 < 1;
                                    if (!isLt2M) {
                                        this.$message.error('上传头像图片大小不能超过 1MB!');
                                    }
                                    return isLt2M;
                                },
                                handleSuccess(res,file) {
                                    console.info(res)
                                  this.$message.success(res.message);
                                },
                                handlePictureCardPreview(file) {
                                    this.dialogImageUrl = file.url;
                                    this.dialogVisible = true;
                                }
                            }
                        }
                    )
                 </script>
</body>
</html>